<template>
    <div class="regress-report">
        <div class="index-data">
            <normal-title titles="指标数据">
                <span slot="titleMore" class="title-lines"></span>
            </normal-title>
            <el-table border :data="tableData">
                <el-table-column prop="index" label="指标" align="center"></el-table-column>
                <el-table-column prop="num" label="数据(精确到小数点后6位)" align="center"></el-table-column>
            </el-table>

        </div>
        <div class="index-chart">
             <normal-title titles="图表">
                <span slot="titleMore" >
                <span class="save-image">
                    <i class="el-icon-download" style="color:#7FCFFF;font-size:12px;cursor: pointer;" @click="saveImage">保存为图片</i>
                </span>
                 <span class="title-lines"></span>
                </span>
             </normal-title>
             <div class="chart-box" ref="chartBox">
                 <ve-histogram :data="chartVeHisData" :settings="settings"></ve-histogram>
                 <VeLine :data="chartData"></VeLine>
             </div>
        </div>
    </div>
</template>
<script>
import normalTitle from '@/components/NormalTitle'
import { VeLine, VeHistogram } from 'v-charts'
import html2canvas from 'html2canvas'
export default {
    name: 'RegressReport', // 回归模型评估报告
    components: {
        normalTitle,
        VeLine,
        VeHistogram
    },
    data () {
        this.settings = {
            itemStyle: {
                color: '#7FCFFF'
            }
        }
        return {
            tableData: [
                {
                    index: 'Wae',
                    num: 10.22
                },
                {
                    index: 'Waec',
                    num: 10.221
                },
                {
                    index: 'Waed',
                    num: 10.222
                },
                {
                    index: 'Waef',
                    num: 10.223
                },
                {
                    index: 'Waeg',
                    num: 10.224
                }
            ],
            chartVeHisData: {
                columns: ['日期', '访问用户'],
                rows: [
                    { '日期': '1/1', '访问用户': 1393 },
                    { '日期': '1/2', '访问用户': 3530 },
                    { '日期': '1/3', '访问用户': 2923 },
                    { '日期': '1/4', '访问用户': 1723 },
                    { '日期': '1/5', '访问用户': 3792 },
                    { '日期': '1/6', '访问用户': 4593 }
                ]
            },
            chartData: {
                columns: ['日期', '访问用户', '下单用户', '下单率'],
                rows: [
                    { '日期': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },
                    { '日期': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },
                    { '日期': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },
                    { '日期': '1/4', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },
                    { '日期': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },
                    { '日期': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 }
                ]
            }
        }
    },
    methods: {
        saveImage () {
            let chartBox = this.$refs.chartBox
            html2canvas(chartBox).then(canvas => {
                this.imgmap = canvas.toDataURL()
                if (window.navigator.msSaveOrOpenBlob) {
                    var bstr = atob(this.imgmap.split(',')[1])
                    var n = bstr.length
                    var u8arr = new Uint8Array(n)
                    while (n--) {
                        u8arr[n] = bstr.charCodeAt(n)
                    }
                    var blob = new Blob([u8arr])
                    window.navigator.msSaveOrOpenBlob(blob, 'chart-download' + '.' + 'png')
                } else {
                    // 这里就按照chrome等新版浏览器来处理
                    const a = document.createElement('a')
                    a.href = this.imgmap
                    a.setAttribute('download', 'chart-download')
                    a.click()
                }
            })
        }
    }
}
</script>
<style lang="less">
.regress-report {
    background:#fff;
    .title-lines {
        display: inline-block;
        vertical-align: top;
        width: calc(100% - 150px);
        float: right;
        height: 1px;
        background: #464D5F;
        position: relative;
        top: 11px;
    }
    .el-table{
        .el-table__header {
            th {
                height: 48px;
                font-size: 16px;
                color: #464D5F;
                font-family: Semibold;
                background: #ECF4F9;
            }
        }
        .el-table__body-wrapper {
            tbody {
                tr {
                    td {
                          height: 48px;
                          font-size: 16px;
                          color: #464D5F;
                    }
                    &:nth-child(2n+2) {
                          td {
                                background: #ECF4F9;
                            }
                    }
                }
            }
        }
    }
    .index-chart {
        .chart-box {
            box-sizing: border-box;
            width: 100%;
            padding-left: 70px;
        }
    }
}
</style>
